<template>
  <page-header-wrapper :title="false">
    <a-card
      title="申请主体"
    >
      <template slot="extra">
        <a-button size="small" icon="plus" type="danger" @click="onAdd">添加</a-button>
      </template>
      <div class="table-page-search-wrapper">
        <a-form-model
          layout="inline"
          :model="queryParam"
        >
          <a-row :gutter="15">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="名称">
                <a-auto-complete
                  v-model="queryParam['filter[title]']"
                  :data-source="searchSource"
                  placeholder="请输入申请主体名称"
                  @select="onSelect"
                  @search="onComplete"
                />
<!--                <a-input v-model="queryParam['filter[subject]']" placeholder="请输入申请主体名称" />-->
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="联系电话">
                <a-input v-model="queryParam['filter[phone]']" placeholder="请输入联系电话" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class='table-page-search-submitButtons'>
                <a-button :disabled="queryParam['filter[title]'] == ''" type="primary" @click="onSearch">搜索</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator">
        <s-table
          bordered
          ref="table"
          size="middle"
          v-show="visible2"
          :row-key="(record) => record.id"
          :columns="listColumns"
          :data="listData"
        >
          <template slot="license_num" slot-scope="text,record">
            {{text}}{{record.id_card}}
          </template>
          <template slot="license_file" slot-scope="text,record">
            <div v-if="text != ''">
              <img width="60" :src="text" @click="handlePreview(text)">
            </div>
            <div v-else>
              <img style="margin-right:5px" width="60" :src="record.id_card_front" @click="handlePreview(record.id_card_front)">
              <img width="60" :src="record.id_card_reverse" @click="handlePreview(record.id_card_reverse)">
            </div>
          </template>
          <template slot="action">
            <a-button disabled type="primary" size="small">查看</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      v-model="previewVisible"
      :footer="null"
    >
      <img style="width: 100%" :src="imgUrl" />
    </a-modal>
    <apply-modal v-if="visible" @cancel="onCancel"></apply-modal>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import ApplyModal from '@/views/customer/components/ApplyModal'
  import customerColumns from '@/columns/customer'
  import { getSubject } from '@/api/customer'
  import { autoSubject } from '@/api/common'

  export default {
    name: 'ApplySubject',
    components: {
      STable,
      ApplyModal
    },
    data () {
      return {
        loading: false,
        listColumns: customerColumns.subject,
        listData: parameters => {
          return getSubject(Object.assign(parameters, this.queryParam)).then(res => {
            this.typeOpts = res.result.typeOpts
            return res.result
          })
        },
        visible: false,
        queryParam: {},
        visible2: false,
        typeOpts: {},
        previewVisible: false,
        imgUrl: '',
        searchSource: []
      }
    },
    methods: {
      handlePreview (url) {
        this.imgUrl = url
        this.previewVisible = true
      },
      onAdd () {
        this.visible = true
      },
      reset () {
        this.queryParam = {}
        this.visible2 = false
      },
      onSearch () {
        const app = this
        if (app.isEmptyObject(app.queryParam)) {
          this.visible2 = true
          this.$refs.table.refresh(true)
        } else {
          app.$info({
            title: '必须填写主体名称或联系电话其中一项'
          })
          return false
        }
      },
      isEmptyObject (obj) {
        for (const k in obj) {
          return true
        }
        return false
      },
      onComplete (searchText) {
        autoSubject(searchText).then(res => {
          this.searchSource = res.result.subject_data
        })
      },
      onSelect (value) {
        this.queryParam['filter[subject]'] = value
        this.$refs.table.refresh(true)
      },
      onCancel (visible) {
        this.visible = visible
        this.$refs.table.refresh()
      }
    }
  }
</script>
